<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index page</title>
    <script src="/js/axios.min.js"></script>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        #nav {
            width: 100%;
            background: #000;
            color: #fff;
            position: fixed;
            height: 30px;
        }

        #container {
            width: 1000px;
            background: #ffe;
            padding: 30px 8px 8px;
            margin: auto;
            height: 2000px;
        }

        #sign {
            width: 1000px;
            margin: auto;
        }

        span {
            cursor: pointer;
            display: inline-block;
            line-height: 30px;
        }

        .form {
            margin: auto;
        }

        #sign_up_form,
        #sign_in_form,
        #avatar {
            display: none;
        }

        #avatar {
            height: 20px;
            margin: 5px;
        }

        #sign_in_button:hover,
        #sign_up_button:hover {
            background: #666;
        }
    </style>
</head>
<body>
<div id="nav">
    <img id="avatar" src="" alt="">
    <div id="sign">
        <span id="sign_up_button">sign up</span>
        <span id="sign_in_button">sign in</span>
    </div>
</div>
<div id="container">
    <h1>index page</h1>
    <div class="form">
        <form id="sign_up_form">
            <p>member sign up</p>
            <input type="text" name="nickname" value="昵称"><br>
            <input type="email" name="email" value="tom@test.com"><br>
            <input type="text" name="telephone" value="12345678"><br>
            <input type="password" name="password" value="123"><br>
            <input type="date" name="dob" value="2000-01-01"><br>
            <!--    冷启动 -->
            <input type="checkbox" name="favorites" value="数码" checked>数码
            <input type="checkbox" name="favorites" value="服饰" checked>服饰
            <br>
            <input type="file" name="file">
            <br>
            <input type="submit" value="sign up">
        </form>
    </div>
    <div class="form">
        <!-- todo -->
        <form id="sign_in_form">
            <p>member sign in</p>
            <input type="text" name="account" placeholder="nickname / email / telephone"><br>
            <input type="password" name="password" placeholder="password" value="123"><br>
            <input type="submit" value="sign in">
        </form>
    </div>
</div>
<script>
    const signUpForm = document.getElementById('sign_up_form');
    const signInForm = document.getElementById('sign_in_form');
    //定义传输类型的格式
    const headers = {'Content-Type': 'multipart/form-data'}
    const type = {type: 'application/json'};

    const signUpButton = document.getElementById('sign_up_button');
    const signInButton = document.getElementById('sign_in_button');
    const avatar = document.getElementById('avatar');

    const sign = document.getElementById('sign');

    signUpButton.onclick = function () {
        signUpForm.style.display = 'block';
        signInForm.style.display = 'none';
    }
    signInButton.onclick = function () {
        signInForm.style.display = 'block';
        signUpForm.style.display = 'none';
    }

    signUpForm.addEventListener('submit', function (event) {
        event.preventDefault();

        let formData = new FormData(signUpForm);
        let data = Object.fromEntries(formData);
        data = {...data, favorites: JSON.stringify(formData.getAll('favorites'))};
        formData.append('user', new Blob([JSON.stringify(data)], type));

        axios.post('/user/create', formData, {headers: headers}).then(res => {
            console.log(res.data);
            if (res.data) {
                signUpForm.style.display = 'none';
                signInForm.style.display = 'block';
                alert('注册成功，请登录');
            }
        }).catch(err => {
            console.error(err);
        })
    })

    signInForm.addEventListener('submit', function (event) {
        event.preventDefault();

        let data = Object.fromEntries(new FormData(signInForm));

        console.log(data);

        axios.post('/user/queryByAccountAndPassword', data).then(res => {
            if (res.data) {
                console.log('success');
                signInForm.style.display = 'none';
                sign.style.display = 'none';
                avatar.style.display = 'block';
                let avatarName = res.data.avatar;
                avatar.setAttribute('src', '/avatar/' + avatarName);
                console.log(avatar);
            } else {
                console.log('failed.');
                alert('Invalid account or password.')
            }
        }).catch(err => {
            console.error(err);
        });
    })
</script>
</body>
</html>